import React, { useEffect, useState } from 'react';
import { Table, Button } from 'antd';
import { getListAction } from '../store/actions.js'
const columns = [
  {
    title: '轮播图',
    dataIndex: 'carouselUrl',
    render: (text) => <img style={{ width: '100%', height: '100%' }} src={text} />,
  },
  {
    title: '跳转链接',
    dataIndex: 'carouselUrl',
    render: (text) => <a href={text}>跳转</a>,
  },
  {
    title: '排序值',
    dataIndex: 'carouselRank',
  },
  {
    title: '添加时间',
    dataIndex: 'createTime',
  },
  {
    title: '操作',
    render(data) {
      console.log(data)
      return <>
        <Button>修改</Button>
        <Button>删除</Button>
      </>
    }
  },
];


const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  getCheckboxProps: (record) => ({
    disabled: record.name === 'Disabled User',
    // Column configuration not to be checked
    name: record.name,
  }),
};
function Swiper() {
  let [data, setData] = useState([])
  let [total, setTotal] = useState(0);
  let [pageN, setPageN] = useState(1);
  function getData(payload) {
    getListAction(payload).then(data => {
      // console.log(data)
      setTotal(data.data.totalCount)
      setData(data.data.list)
    })
  }
  function pageChange(val) {
    console.log(val)
    setPageN(val)
    getData({
      pageNumber: val,
      pageSize: 10
    })
  }
  useEffect(() => {
    getData({
      pageNumber: 1,
      pageSize: 10
    })
  }, [])
  return <div className=''>
    <div className="btn_box">
      <Button type='primary'>增加</Button>
      <Button type="primary" danger>批量删除</Button>
    </div>
    <div className="table_box">
      <Table
        rowSelection={{
          type: 'checkbox',
          ...rowSelection,
        }}
        columns={columns}
        dataSource={data}
        pagination={{
          total: total,
          size: 10,
          onChange: pageChange
        }}
      />
    </div>
  </div>
}

export default Swiper